<template>
    <div class="upload-picture-card" v-loading="uploadimageloading" :style="{
        width:size+'px',
        height:size+'px',
        'line-height':size+'px',
    }">
        <div :class="['el-upload',!uploadimage&&'empty']">
            <i class="el-icon-edit" :style="{fontSize:size/3+'px'}"></i>
            <i class="el-icon-plus" :style="{fontSize:size/3+'px'}"></i>
            <input title="点击上传图片" @change="imageChange" :accept="accept" type="file" name="file" class="upload-picture-input">
        </div>
        <img class="upload-picture-thumb" v-if="uploadimage && type ==='image'" :src="thumb||uploadimage" />
        <video class="upload-picture-thumb" v-if="uploadimage && type === 'video'" :src="thumb||uploadimage" />
    </div>  
</template>
<script>
export default {
    name:'uploadPictureCard',
    props:{
        size:{
            type:Number,
            default:40
        },
        src:{
          type:String,
            default:''  
        },
        accept:{
            type:String,
            default:'.png, .jpg, .jpeg'
        },
        type:{
            type:String,
            default:'image'
        }
    },
    watch:{
        src(val){
            //this.uploadimage = ''
            const src = val.indexOf('http')>-1 ?val:this.config.apiUrl+val
            if(src !== this.uploadimage){
                this.uploadimage = ''
                this.thumb = ''
            }
            if(this.type === 'video'){
                this.uploadimage = src    
            }else{
                const i=new Image()
                i.onload=()=>{
                    this.uploadimage = src 
                }
                i.src = src 
            }
            
        }
    },
    data(){
        return {
            uploadimageloading:false,
            uploadimage:'',
            thumb:''
        }
    },
    methods:{
        async imageChange(e){
            const target = e.target;
            const files = target.files;
             
            if(files.length){
                this.uploadimageloading = true
                this.$emit('uploading')
                
                const res = await this.upload(files[0])
                if(res){
                    this.thumb = URL.createObjectURL(files[0]); 
                    this.uploadimage = this.config.apiUrl+res
                    this.$emit('uploaded',res)
                }
                target.value = ''
                this.uploadimageloading = false
            }
            
        },
        async upload(file){
            let res
            if (file.size / 1000 / 1000 > 100 || file.size==0 ) {
                this.$message({
                    message:'由于微信限制，文件需要大于0M且小于100M',
                    type:'error'
                })
                return undefined
            }
            try {
                res = await this.uploadFile(file,{})
            } catch (error) {
                return  
            }
            return res
        }
    }   
}
</script>
<style scoped>
.upload-picture-card{
    width: 100%;
    height: 100%;
    position: relative;
}
.el-upload{
    border: 1px dashed #c0ccda;
    border-radius: 3px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    vertical-align: top; 
    position: relative;
    z-index: 1;
    opacity: 0; 
    display:flex;
    justify-content: center;
    align-items: center; 
}
.upload-picture-card .el-upload .el-icon-plus{
    display:none
}
.upload-picture-card .el-upload:hover,
.upload-picture-card .empty{
    border-color: #409EFF;
    color: #409EFF;
    background: rgba(255,255,255,.7);
    opacity: 1;
}
.upload-picture-card .empty .el-icon-edit{
    display: none
}
.upload-picture-card .empty .el-icon-plus{
    display: inline-block;
}
.upload-picture-input{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
.upload-picture-thumb{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit:contain;
    border-radius: 3px;
    opacity: 1;
    background: #f1f1f1;
}
</style>